<style scoped>
    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .layout-logo {
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }

    .layout-nav {
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }
</style>
<template>
    <Layout style="height:100%;">
        <Header>
            <!-- 顶部菜单 -->
            <Menu mode="horizontal" theme="dark" active-name="1">
                <div class="layout-logo"></div>
                <div class="layout-nav">
                    欢迎您：
                    <MenuItem name="1">
                        <Icon type="ios-navigate"></Icon>
                        <!--Menu 1 - 1-->
                        {{loginId}}
                        Admin
                    </MenuItem>
                    <MenuItem name="2" to="/main/changePwd">
                        <Icon type="ios-keypad"></Icon>
                        修改密码
                    </MenuItem>
                    <MenuItem name="3" on-select="logout">
                        <Icon type="ios-analytics"></Icon>
                        退出
                    </MenuItem>
                    <MenuItem name="4">
                        <Icon type="ios-paper"></Icon>
                        Menu 4
                    </MenuItem>
                </div>
            </Menu>
        </Header>
        <Layout>
            <Sider hide-trigger :style="{background: '#fff'}">
                <Menu :active-name=navigationIndex theme="dark" width="auto" :open-names=page>
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="ios-navigate"></Icon>
                            业务管理
                        </template>
                        <MenuItem name="1-1" to="/main/worker">工人管理</MenuItem>
                        <MenuItem name="1-2" to="/main/company">企业管理</MenuItem>
                        <MenuItem name="1-3" to="/main/job">招工管理</MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-keypad"></Icon>
                            系统管理
                        </template>
                        <MenuItem name="2-1" to="/main/dictionary">字典管理</MenuItem>
                    </Submenu>
                </Menu>
            </Sider>
            <Layout :style="{padding: '0 24px 24px'}">
                <Breadcrumb :style="{margin: '24px 0'}">
                    <BreadcrumbItem>{{homeText}}</BreadcrumbItem>
                    <BreadcrumbItem>{{menuText}}</BreadcrumbItem>
                    <BreadcrumbItem>{{optionText}}</BreadcrumbItem>
                </Breadcrumb>
                <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                    <router-view/>
                </Content>
            </Layout>
        </Layout>
    </Layout>
</template>
<script>
    import util from '../libs/util';

    export default {
        data() {
            let loginId = util.loginId;
            return {
                homeText: '主页',
                menuText: 'Item 1',
                optionText: 'Option 1 - 1',
                loginId: loginId,
                navigationIndex: '',
                page: [],
            }
        },
        created() {
            let currentPage = this.$router.history.current.fullPath;
            let url = [{router: '/main/worker', index: '1-1', page: ['1']},
                {router: '/main/company', index: '1-2', page: ['1']},
                {router: '/main/job', index: '1-3', page: ['1']},
                {router: '/main/dictionary', index: '2-1', page: ['2']}]
            this.navigationIndex = url[0].index;
            this.page = url[0].page;
            url.forEach((item) => {
                if (item.router == currentPage) {
                    this.navigationIndex = item.index;
                    this.page = item.page;
                }
            })
        },
        methods: {

        }
    }

</script>
